<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>注册或登录</title>

	<!-- bootstrap -->

	<!-- 引入jqury,bootsrapt都依赖jqury，必须放在前面 -->
	<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
	<!-- jquery cookies -->
	<script type="text/javascript" src="../static/js/jquery.cookie.js"></script>
	<link href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
	<!-- 引入js -->
	<script type="text/javascript" src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>



</head>

<body>
	<f:view>
		<jsp:include page="header.jsp" />
		<div class="row" style="background: #9BCD9B; margin-top: -20px;">
			<div class="col-md-8 col-md-offset-2">
				<br />
				<h4 style="color: #FF1493;">注册新账号</h4>
				<br />
			</div>
		</div>

		<div class="row" style="height:618px;background-image:url('../static/images/bgcover.jpg');
			background-position:30% 100%; ">

			<div class="col-md-4 col-md-offset-7" style="top: 88px; background: #fff;">
				<form class="form-horizontal" role="form">
					<div>
						<h2>注册账号</h2>
					</div>
					<div class="form-group">
						<span class="glyphicon glyphicon-user"></span>
						<div class="col-sm-10">
							<input type="text" name="docName" class="form-control" id="reg_docname"
								placeholder="请输入用户名">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<span class="glyphicon   glyphicon-phone"></span>
						<div class="col-sm-10">
							<input type="phonenumber" name="docPhoneNumber" class="form-control" id="rg_phone"
								placeholder="请输入手机号">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<span class="glyphicon   glyphicon-envelope"></span>
						<div class="col-sm-10">
							<input type="email" name="docEmail" class="form-control" id="rg_email" placeholder="请输入邮箱">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<span class="glyphicon glyphicon-info-sign"></span>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="reg_password" placeholder="请输入密码">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<span class="glyphicon   glyphicon-ok-sign"></span>
						<div class="col-sm-10">
							<input type="password" name="docPassword" class="form-control" id="reg_confirm_password"
								placeholder="请再次输入密码">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-10">
							<label class="radio-inline"> <input type="radio" name="docGender" id="gender1" value="M"
									checked="checked"> 男
							</label> <label class="radio-inline"> <input type="radio" name="docGender" id="gender2"
									value="F"> 女
							</label>
						</div>
					</div>

					<div class=" col-sm-offset-8 col-sm-6">
						<label><a href="login.html">转到登录</a> </label>
					</div>
					<div class="form-group">
						<div class="col-md-offset-1 col-md-4">
							<button class="btn btn-primary" type="button" id="reg_btn"
								style="width: 280px;">立即注册</button>
						</div>
					</div>
				</form>
			</div>

		</div>
		<jsp:include page="footer.jsp" />
	</f:view>
	<script type="text/javascript">

		//ajax 提交注册获取路径${APP_PATH}  121.41.228.3
		//name 和psw
		var url = 'http://121.41.228.3:8080';
		function register() {
			var username = $("#reg_docname").val();
			var psw = $("#reg_password").val();
			var re_password = $("#reg_confirm_password").val();
			if (username == undefined || username == "") {
				alert("Please enter userName");
			} else {
				$.ajax({
					type: "post",
					contentType: "application/json",
					url: url + "/signup", 
					//请求头或者beforeSend：
					headers: {     
						//	Accept: "application/json",
						//这是获取的token
						//token: "" + token  
					},
					dataType: "json",
					data:JSON.stringify( { "username": username, "password": psw, "re_password": re_password }),
					success: function (result) {
						console.log(result);
						var msg = result.msg;
						var code = result.code;
						if (code == 200) {
							//注册成功转到登录
							alert(msg);
							window.location.replace("login.html");
						} else {
							alert(msg);
						}

					}

				});
			}
		}
		//把注册绑定事件
		$("#reg_btn").click(function () {
			register();
			//alert("register");

		});
		//校验输入框不为空，且密码两次相同
		//显示校验的提示信息 
		/**
		ele 待校验元素，status 状态， msg，消息		
		 */
		function show_validate_msg(ele, status, msg) {
			if ("success" == status) {
				$(ele).parent().removeClass("has-error")
					.addClass("has-success");
				$(ele).next("span").text(msg);
			} else if ("error" == status) {
				$(ele).parent().removeClass("has-success")
					.addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}

		//校验表单数据
		function validate_add_form() {
			//1、拿到要校验的数据
			//采用正则表达式
			var docName = $("#reg_docname").val();
			var regName = /(^[a-zA-Z0-9_-\u2E80-\u9FFF]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;

			if (!regName.test(docName)) {
				//封装成显示方法
				show_validate_msg("#reg_docname", "error",
					"用户名应为2-6位汉字或者6-16位字母、数字  - 以及下划线的组合");

				return false;
			} else {
				show_validate_msg("#reg_docname", "success", "");
			}
			//校验手机号
			var docPhone = $("#rg_phone").val();
			var regPhone = /^1[3456789]{2}[0-9]{8}$/;

			if (!regPhone.test(docPhone)) {
				//封装成显示方法
				show_validate_msg("#rg_phone", "error",
					"请输入正确的手机号");

				return false;
			} else {
				show_validate_msg("#rg_phone", "success", "");
			}



			//校验邮箱
			var empEmail = $("#empEmail_add_input").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if (!regEmail.test(empEmail)) {
				show_validate_msg("#empEmail_add_input", "error", "邮箱格式不正确");
				return false;
			} else {
				show_validate_msg("#empEmail_add_input", "success", "");
			}

			return true;

		}
		////为输入框绑定校验事件 校验用户名是否可用
		$("#reg_docname").change(function () {
			//校验
			validate_add_form();

		});
		//手机号
		$("#rg_phone").change(function () {
			//校验
			validate_add_form();

		});
		//邮箱
		//密码
		//确认密码
	</script>

</body>

</html>
